<template>
  <el-dialog
    class="project-team-members-dialog"
    width="800px"
    :visible.sync="dialogVisible"
    title="项目组成员"
    :close-on-click-modal="false"
    v-dialogDrag="true"
    @open="handleDialogOpen"
    @closed="handleDialogClosed"
  >
    <div style="margin-bottom: 10px;">
      <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAddProjectTeamMember">添加</el-button>
      <el-button type="danger" icon="el-icon-delete" size="mini" @click="handleBatchDeleteProjectTeamMember">批量删除</el-button>
    </div>

    <el-table :data="tableList" v-loading="tableLoading" @selection-change="handleTableSelectionChange">
      <el-table-column label="" type="selection" align="center" width="50">
      </el-table-column>
      <el-table-column label="排序" prop="sort" align="center" width="60">
        <template slot-scope="scope">
          <span>{{ scope.row.sort }}</span>
        </template>
      </el-table-column>
      <el-table-column label="姓名" prop="name" align="center" min-width="100">
        <template slot-scope="scope">
          <span>{{ scope.row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="职称/专业" prop="job" align="center" min-width="120">
        <template slot-scope="scope">
          <span>{{ scope.row.job }}</span>
        </template>
      </el-table-column>
      <el-table-column label="资格证书号" prop="certificate" align="center" min-width="150">
        <template slot-scope="scope">
          <span>{{ scope.row.certificate }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" prop="" align="center" width="100">
        <template slot-scope="scope">
          <el-button type="text" @click="handleEditProjectTeamMember(scope.row)">修改</el-button>
          <el-button type="text" style="color: #f32d2d" @click="handleDeleteProjectTeamMember(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- <pagination
      class="zs-pagination"
      :total="tableTotal"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getTableDataList"
    ></pagination> -->

    <div class="dialog-footer" slot="footer">
      <el-button @click="dialogVisible = false">关 闭</el-button>
    </div>

    <AddEditProjectTeamMember
      :show.sync="showAddEditProjectTeamMemberDialog"
      :operType="operType"
      :sort="tableList.length"
      :row="currRow"
      @refresh="getTableDataList"
    ></AddEditProjectTeamMember>
  </el-dialog>
</template>

<script>
import AddEditProjectTeamMember from './AddEditProjectTeamMember.vue'
import {
  reqProjectTeamMemberList,
  reqDeleteProjectTeamMember
} from '@/api/person/projectTeamMembers.js'

export default {
  name: 'ProjectTeamMembersDialog',
  components: {
    AddEditProjectTeamMember
  },
  dicts: [],
  props: {
    show: {
      type: Boolean,
      default: false,
    },
  },
  computed: {
    dialogVisible: {
      get() {
        return this.show
      },
      set(value) {
        this.$emit('update:show', value)
      }
    }
  },
  data() {
    return {
      queryParams: {},
      tableLoading: false,
      tableList: [],
      tableTotal: 0,

      selection: [],

      showAddEditProjectTeamMemberDialog: false,
      operType: 'add',
      currRow: {}
    }
  },
  created() {
    this.initQueryParams()
  },
  methods: {
    // 弹框打开时
    handleDialogOpen() {
      this.getTableDataList()
    },
    // 弹框关闭时
    handleDialogClosed() {
      this.initQueryParams()
      this.tableLoading = false
    },
    // 初始化查询参数
    initQueryParams() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
      }
    },
    // 获取查询参数
    getQueryParams() {
      const params = JSON.parse(JSON.stringify(this.queryParams))
      return params
    },
    // 获取表格数据列表
    getTableDataList() {
      const params = this.getQueryParams()
      this.tableLoading = true
      reqProjectTeamMemberList(params).then(res => {
        this.tableLoading = false
        this.tableList = res.data || []
        this.tableTotal = this.tableList.length
      }).catch(err => {
        this.tableLoading = false
      })
    },
    // 表格选中事件
    handleTableSelectionChange(selection) {
      this.selection = selection
    },
    // 添加项目组成员
    handleAddProjectTeamMember() {
      this.operType = 'add'
      this.showAddEditProjectTeamMemberDialog = true
    },
    // 修改项目组成员
    handleEditProjectTeamMember(row) {
      this.operType = 'edit'
      this.currRow = row
      this.showAddEditProjectTeamMemberDialog = true
    },
    // 删除项目组成员
    handleDeleteProjectTeamMember(row) {
      this.$modal.confirm(`是否确认删除该项目组成员?`).then(() => {
        reqDeleteProjectTeamMember(row.taskGroupMemberId).then(res => {
          this.$message.success('操作成功')
          this.getTableDataList()
        }).catch((err) => {})
      }).catch(() => {})
    },
    // 批量删除项目组成员
    handleBatchDeleteProjectTeamMember() {
      if (this.selection.length === 0) {
        return this.$message.warning('请选择要删除的项目组成员')
      }
      this.$modal.confirm(`是否确认删除选中的项目组成员?`).then(() => {
        reqDeleteProjectTeamMember(this.selection.map(item => item.taskGroupMemberId)).then(res => {
          this.$message.success('操作成功')
          this.getTableDataList()
        }).catch((err) => {})
      }).catch(() => {})
    }
  },
}
</script>

<style lang="scss" scoped>
.project-team-members-dialog {

  ::v-deep .el-dialog__body {
    max-height: 70vh;
    overflow-y: auto;
  }
}

.zs-pagination {
  position: unset !important;
  background: transparent !important;
  height: auto !important;
  padding: unset !important;
  text-align: center;

  ::v-deep .el-pagination {
    position: unset !important;
    transform: unset !important;
  }
}
</style>